import React, { Component } from "react";

// 在函数组件中，使用props参数来接受children
const Child2 = (props) => {
  console.log(props);
  return (
    <>
      <div>child2组件 - {props.children}</div>
    </>
  );
};

// 在类组件中，使用this.props.children来接受插槽的内容
class Child1 extends Component {
  render() {
    console.log(this);
    return (
      <>
        <div>child1组件 - {this.props.children}</div>
      </>
    );
  }
}

const App = () => {
  return (
    <>
      <h2>插槽</h2>
      <Child1>123</Child1>
      <Child2>
        <span>456</span>
      </Child2>
    </>
  );
};

export default App;
